<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网易云音乐项目</title>
		<link rel="stylesheet" href="css/wangyiyun.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_2371869_u59sbky7taq.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_2371869_7v5k725qrfn.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_2371869_ja78zmho38.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_2371869_5ujggrwki8q.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_2371869_2rww252z6ik.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_2371869_6ylajwphvgv.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_2371869_kn2vdzr2nu9.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_2371869_ekalrjcepea.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_2371869_5sftippsagd.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_2371869_q8sh8j5wyoa.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_2371869_xh022oasig.css">
		<link rel="stylesheet" href="http:////at.alicdn.com/t/font_2371869_9ucshwsqpjj.css">
		<link rel="stylesheet" href="http:////at.alicdn.com/t/font_2371869_muiklh5ck6b.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_2371869_65wa4u9kix2.css">
	</head>
	<body>
		<div id="box">
			<div id="mengDiv">

			</div>
			<div id="landDiv">
				<h1>登陆窗口</h1>
				<hr>
				<input type="text" placeholder="请输入用户名" id="username">
				<input type="password" placeholder="请输入密码" id="pwd">
				<button id="pass">取消</button>
				<button id="landbtn">登陆</button>
				<button id="closs">X</button>
			</div>
			<nav>
				<div id="top">
					<i class="icon iconfont icon-wangyiyun"></i>
					<span>网易云音乐</span>
					<input type="text" id="text" value="搜索音乐">
					<i class="icon iconfont icon-denglu"></i>
					<span id="land">登陆</span>

					<i class="icon iconfont icon-pifu"></i>
					<span>皮肤</span>
					<input type="color" id="color">
				</div>
			</nav>
			<aside>
				<div id="inner">
					<div id="left">
						<div id="cover">
							<!-- <img src="" alt="" id="coverImg"> -->
						</div>
					</div>
					<div id="right">
						<p id="song"></p>
						<p id="name"></p>
						<div id="lyricDiv">
							<ul id="lyriclist">

							</ul>
						</div>
						<div id="position">
							<div class="top1">
								<button class="a">播放列表</button>
								<button class="b">历史记录</button>
							</div>
							<div id="history">
								<!-- <ul id="historyList">
									
								</ul> -->
							</div>
							<ul id="gename">
								<!-- <li id="songTitle">江南</li>
								<li id="isName"><span>专辑:第二天堂</span><span>歌手:林俊杰</span><span>专辑:搜索页</span></li>
								<li id="name"></li>
								<li></li>
								<li></li> -->
							</ul>
						</div>

					</div>
				</div>
			</aside>
			<footer>
				<div id="bottom">
					<i class="icon iconfont icon-prev"></i>
					<i class="icon iconfont icon-bofang-" id="play"></i>
					<!-- 					<i class="icon iconfont icon icon-zantingtingzhi"></i> -->
					<i class="icon iconfont icon-ziyuan"></i>
					<span id="time">00:00</span>
					<audio src="music/jn.mp3"></audio>
					<input type="range" id="speed" min="0" max="" step="1" value="0">
					<span id="UPtime">20:00</span>
					<i class="icon iconfont icon-naoling" id="all"></i>
					<!-- <i class="icon iconfont icon-jingyin"></i> -->
					<input type="range" id="volume" min="0" max="1" step="0.01">
					<i class="icon iconfont icon-listpress"></i>
					<i class="icon iconfont icon-comment"></i>
					<i class="icon iconfont icon-xiangjixianeps-"></i>
					<!-- 					<i class="icon iconfont icon-xunhuanbofang"></i> -->
					<!-- <i class="icon iconfont icon-bofangye-caozuolan-suijibofang"></i> -->
					<i></i>
				</div>
			</footer>
			<div id="message">

			</div>
		</div>
	</body>
	<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="js/data.js"></script>
	<script type="text/javascript">
		//评论
		$('#message').hide(); //现将评论的div隐藏
		$('.icon-comment').click(function() { //给评论的I标签添加点击事件
			$('#message').toggle(); //点击时隐藏或者显示
		})
		//登录界面
		$('#landbtn').click(function() { //给登陆按钮写的点击事件
			var nameTxt = username.value; //这里是将用户输入的用户名保存到一个变量中
			var pwdTxt = pwd.value; //找到数据中保存的用户名
			for (var i = 0; i < users.length; i++) { //循环数据中的用户名
				var obj = users[i]; //依次拿出并且保存到变量中
				if (obj.name == nameTxt && obj.pwd == pwdTxt) { //判断如果用户名和密码都一样
					break; //返回循环
				}
			}
			if (i < users.length) { //说明提前结束了
				alert("登陆成功"); //提前结束了就弹出提示框登陆成功
				$('#landDiv').hide(); //隐藏登陆页面
				$('#mengDiv').hide(); //隐藏门板div
				$('#land').text(nameTxt); //将用户输入的用户名添加至登陆按键的内容中
			} else {
				alert("登陆失败"); //如果不相同登陆失败
			}
		})
		$('#closs').click(function() { //给取消按钮绑定点击事件
			$('#landDiv').hide(); //隐藏
			$('#mengDiv').hide(); //隐藏
		})
		$('#pass').click(function() {
			$('#landDiv').hide(); //隐藏
			$('#mengDiv').hide(); //隐藏
		})
		//登陆
		$('#land').click(function() {
			$('#landDiv').toggle(); //给登陆页面做点击隐藏显示事件
			$('#mengDiv').show(); //
		})
		//播放模式
		var myAudio = $('audio').get(0); //获取音频标签
		var playModeTitleArr = [ //将I标签的class放入数组中备用
			"icon-xiangjixianeps-",
			"icon-xunhuanbofang",
			"icon-bofangye-caozuolan-suijibofang"
		];
		var playModeTitleArrIndex = 0; //定义一个变量保存class数组中的下标
		$('.icon-xiangjixianeps-').click(function() {
			playModeTitleArrIndex = (playModeTitleArrIndex + 1) % playModeTitleArr.length; //定义下标
			$(this).removeClass(playModeTitleArr[playModeTitleArrIndex - 1]); //取消上一个的class属性
			$(this).addClass(playModeTitleArr[playModeTitleArrIndex]); //添加现在的下标class属性
		})
		//当音乐播放完时，由播放模式确定播放下一首是什么
		myAudio.onended = function() {
			switch (playModeTitleArrIndex) {
				case 0: //顺播放
					musicIndex++;
					if (musicIndex < musicData.length) { //判断条件如果==当前长度时
						switchMusic(musicIndex); //这里传入的是处理后的下标\
						myAudio.play();
					} else {
						musicIndex = musicData.length - 1;
					}
					break;
				case 1: //循环播放
					musicIndex++; //下标++
					if (musicIndex == musicData.length) { //判断条件如果==当前长度时
						musicIndex = 0; //下标为0歌曲循环
						myAudio.play();
					}
					switchMusic(musicIndex); //这里传入的是处理后的下标
					break;
				case 2: //随机播放
					misicIndex = parseInt(Math.random() * musicData.length);
					switchMusic(musicIndex); //这里传入的是处理后的下
					myAudio.play();
					break;
			}
		}
		var myAudio = $('audio').get(0); //获取音频标签
		var timer;//一个全局变量的定时器
		var a = 0;//这里必须声明成全局变量不然每次都会销毁重置
		$('.icon-bofang-').click(function() { //给播放按钮添加点击事件
			if (myAudio.paused) { //判断条件为如果音频的paused状态实现时检查音乐是否暂停的属性
				myAudio.play(); //就播放音乐
					var box = document.getElementById("cover")
					timer = setInterval(function() {
						box.style.transform = "rotateZ(" + a + "deg)";
						a++;
					}, 100);
				$('.icon-bofang-').removeClass('icon iconfont icon-bofang-'); //清除原来的class
				$(this).addClass('icon iconfont icon-zantingtingzhi'); //加上新的class
			} else {
				myAudio.pause(); //如果不是播放状态的情况下就暂停音乐
				$(this).addClass('icon iconfont icon-bofang-'); //并将class样式换回来
				console.log(a)
				clearInterval(timer);
			}
		})
		//静音位置做法
		var val = $('#volume').val(); //定义一个变量用来保存声音的值
		$('.icon-naoling').click(function() { //给静音按钮绑定一个点击事件
			if (myAudio.volume == 0) { //如果如果音频的volume属性为0时则是静音状态
				myAudio.volume = val; //此时将现在的音量值赋给音频的volume属性
				$('#volume').val(val); //将val变量的值赋给保存声音大小的input标签
				$(this).addClass('icon iconfont icon-naoling'); //改变他的class属性用来更换图标
			} else {
				myAudio.volume = 0; //如果不是静音状态的话
				val = $('#volume').val(); //将现在的input的值保存到变量中
				$(this).removeClass('icon iconfont icon-naoling'); //并且移出原来的样式
				$(this).addClass('icon iconfont icon-jingyin'); //添加新的样式
				$('#volume').val(0); //并且现在声音的val值为0
			}
		});
		//调整音量大小
		$('#volume').on('input', function() { //定义一个On input 事件
			val = $('#volume').val(); //此时将现在的Input值保存至val变量中进行动态的显示
			myAudio.volume = val; //将这个变量中用户指定值动态保存在val中将值赋给这首音乐的声音大小属性volum
			if (myAudio.volume == 0) { //判断条件如果声音为0
				$('#all').removeClass('icon iconfont icon-naoling'); //就清除此按钮的class
				$('#all').addClass('icon iconfont icon-jingyin'); //在添加新的class
			} else if (myAudio.volume != 0) { //如果不=0的情况下
				$('#all').addClass('icon iconfont icon-naoling'); //将图案设置为原始状态
			}
		});
		//获取音乐总时间
		myAudio.oncanplay = function() {
			// myAudio.oncanplaythrough = function() {
			var songLength = parseInt(myAudio.duration); //获取这个音乐加载完成后的总时间
			$('#speed').attr('max', songLength); //更改音乐时长中的最大值
			$('#UPtime').text(transformation(songLength)); //将音乐时长的值存入一个函数中计算出分秒放入存时间的span中
			// myAudio.play();


		}
		//当音频正在播放时获取当前播放时间

		//拖动音乐时长时改变前面的秒数和播放进度
		$('#speed').on('input', function() {
			$('#time').text(transformation($(this).val())); //改变前面的显示时间
			myAudio.currentTime = $(this).val(); //改变音乐的播放进度
		})
		$('#speed').mouseover(function() { //这里的办法比较取巧定义一个鼠标滑入事件如果滑入时暂停音乐
			myAudio.pause(); //暂停音乐
			clearInterval(timer)
		})
		$('#speed').mouseout(function() { //如果滑出时开始音乐
			if ($('#play').text() == "") {
				myAudio.play(); //开始音乐
				var box = document.getElementById("cover")
				timer = setInterval(function() {
					box.style.transform = "rotateZ(" + a + "deg)";
					a++;
				}, 100);
			}
		})
		//当拖动时不要是音乐断断絮絮需要暂停
		function transformation(n) {
			var s = n % 60; //这里需要处理秒数的值为两位。
			return parseInt(n / 60) + ":" + (s > 9 ? s : ('0' + s)); //计算时长的分秒先是取余后算出分钟后除以60算出秒钟
		}
		//上一首下一首的
		//播放列表显示
		var ul = $('#right ul'); //找到播放列表的存放位置
		var musicIndex = 0; //定义一个下标为的变量
		musicData.forEach(function(item, idx) { //循环json数据中的值并且给两个变量一个对象一个下标
			// console.log(item.song)
			// console.log(item.singer)
			var li = $(`<li>${item.song}----${item.singer}</li>`); //创建一个新的Li显示歌曲名和作者
			if (idx == 0) { //判断如果下标为0时
				li.addClass('bgc'); //添加新的class
			}
			$('#gename').append(li); //将新创建的li放入ul中
		})
		switchMusic(0);
		//点击切换
		function switchMusic(idx) { //封装一个函数用来处理下一曲上一曲
			$("#right ul li").removeClass("bgc"); //移出所有的class
			$("#right ul li").eq(idx).addClass("bgc"); //给当前点击的li加class
			var url = musicData[idx].url; //定义一个变量用来保存url地址 这里的下标是一个局部变量
			myAudio.src = url; //将地址给到音乐的src属性中
			//显示评论
			$("#message").empty(); //清空当前的评论值
			var msg = musicData[idx].msg;
			msg.forEach(function(item) {
				var p = $(`
					<h2>${item.userId}</h2>
					<h3>${item.date}</h3>
					<p>${item.megCon}</p>
				`);
				<!-- <p id="song">江南</p>
				$("#message").append(p);
			})
			// myAudio.oncanplay = function() {
			// 	myAudio.play();
			// }
		}
		$('#song').append(`<span>${musicData[musicIndex].song}</span>`);
		$("#name").append(
			`<span>专辑:${musicData[musicIndex].album}</span><span>歌手:${musicData[musicIndex].singer}</span>
			 	<span>专辑:${musicData[musicIndex].source}</span>`
		);
		$("#right ul li").click(function() { //定义一个点击事件给每个Li
			// $("#right ul li").removeClass("bgc");
			// $(this).addClass("bgc");
			// musicIndex=$(this).index();
			// var url = musicData[musicIndex].url;
			// myAudio.src = url;
			// console.log(myAudio.src);
			musicIndex = $(this).index(); //这里获取的是当前点击的下标
			switchMusic($(this).index()); //将当前点击的下标传入处理函数中
			$('#name').text("");
			$("#song").text("");
			$('#song').append(`<span>${musicData[musicIndex].song}</span>`);
			$("#name").append(
				`<span>专辑:${musicData[musicIndex].album}</span><span>歌手:${musicData[musicIndex].singer}</span>
			 	<span>专辑:${musicData[musicIndex].source}</span>`
			);
			show();
			img();
			// var song = $(`<span id=song>${musicData[musicIndex].song}</span>`);
			// $("#song").append(song);
			// //<p style="margin-left:50px;"><span id="album">专辑
			// //</span><span id="singer">歌手</span><span id="source">专辑</span></p> -->
			// var span = $(
			// 	`<span>${musicData[musicIndex].album}</span><span>${musicData[musicIndex].singer}</span>
			// 	<span>${musicData[musicIndex].source}</span>
			// 	`
			// );
			// // $("#name").append(span);
			// span.appendTo(`$("#name")`);

		})
		//上一首
		$('.icon-prev').click(function() { //给上一曲的按钮一个点击事件
			musicIndex--; //下标--
			// if(musicIndex--==-1){
			// 	musicIndex=0;
			// }
			if (musicIndex == -1) { //判断条件如果下标小于-1时
				musicIndex = musicData.length - 1; //歌曲循环播放，下标就是json数据的长度减1
			}
			switchMusic(musicIndex); //调用处理函数，函数中传入的下标是--后的下标
			$('#name').text("");
			$("#song").text("");
			$('#song').append(`<span>${musicData[musicIndex].song}</span>`);
			$("#name").append(
				`<span>专辑:${musicData[musicIndex].album}</span><span>歌手:${musicData[musicIndex].singer}</span>
			 	<span>专辑:${musicData[musicIndex].source}</span>`
			);
			show();
			img();
		})
		//下一曲
		$('.icon-ziyuan').click(function() { //给下一曲一个点击事件
			musicIndex++; //下标++
			if (musicIndex == musicData.length) { //判断条件如果==当前长度时
				musicIndex = 0; //下标为0歌曲循环
			}
			switchMusic(musicIndex); //这里传入的是处理后的下标
			$('#name').text("");
			$("#song").text("");
			$('#song').append(`<span>${musicData[musicIndex].song}</span>`);
			$("#name").append(
				`<span>专辑:${musicData[musicIndex].album}</span><span>歌手:${musicData[musicIndex].singer}</span>
			 	<span>专辑:${musicData[musicIndex].source}</span>`
			);
			show();
			img();
		})

		//列表事件
		$('#position').hide();
		$('.icon-listpress').click(function() {
			$('#position').toggle();
			$('#history').hide();
		})
		$('.b').click(function() {
			$('#history').toggle();
		})
		//专辑图片渲染
		function img() {
			$('#cover').html("");
			var src = musicData[musicIndex].cover;
			var img = $(`<img src="${src}">`);
			$('#cover').append(img);
		}
		img();
		//旋转的方法
		function transform(){
			var box = document.getElementById("cover")
			var a = 0;
			var timer;
			var timer = setInterval(function() {
				box.style.transform = "rotateZ(" + a + "deg)";
				a++;
			}, 100);
		};
		
		//歌词同步
		function show() {
			var myAudio = $('audio').get(0); //获取音频标签
			var lrcsArr = lrcs[musicIndex].lyric;
			$('#lyriclist').text("");
			lrcsArr.forEach(function(item) {
				var li = $(`<li time=${item.time}>${item.lineLyric}</li>`);
				$('#lyriclist').append(li);
			})
			myAudio.ontimeupdate = function() {
				var songLength = parseInt(myAudio.currentTime); //获取这个音乐加载完成后的总时间
				$('#time').text(transformation(songLength)); //获取音乐的播放时长，存入开始时间的span中
				$('#speed').val(songLength);
				var s = this.currentTime;
				s = parseInt(s);
				//console.log(s)
				for (var o = 0; o < $('#lyriclist li').length; o++) {
					var li = $('#lyriclist li').eq(o);
					if (s >= li.attr('time')) {
						$('#lyriclist li').removeClass('textColor');
						li.addClass('textColor');
						document.getElementById("lyricDiv").scrollTop = (o - 6) * 40;
						// break;
					}
				}
			}
		}
		show();
	</script>
</html>
<!-- 当切换歌曲是播放和暂停 按钮状态要一致 -->
